import { Component } from 'react'

interface IProps {
	title?: string
	span?: number
}
class Card extends Component<IProps> {
	render() {
		const { title = 'title', span = 8 } = this.props
		return (
			<div
				style={{
					margin: '10px',
					padding: '10px',
					display: 'inline-block',
					boxSizing: 'border-box',
					minHeight: '100px',
					verticalAlign: 'top',
					backgroundColor: '#FFFFFF',
					boxShadow: '1px 1px 10px rgb(0 0 0 / 7%)',
					width: `calc(${4.166666666666667 * span}% - 20px)`,
				}}
			>
				<h3>{title}</h3>
				<div>{this.props.children}</div>
			</div>
		)
	}
}

export default Card
